<?
include './php/lib_dbconnection.php';
$city_id = $_GET['city_id'];
$query_result = mysql_query("SELECT place_id, place_name, place_photo_path FROM places WHERE city_id=$city_id;");
?>
<!DOCTYPE HTML>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-touch-fullscreen" content="yes" />
        <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
        <meta charset="utf-8"/>
        <!-- prevent cache -->
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="pragma" content="no-cache">
        
        <title>TweetView</title>
        <?
        if(in_array('theme', array_keys($_GET))){
            switch($_GET['theme']){
                case 'iphone':
                    print('<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes/iphone/iphone.css" rel="stylesheet" />');
                    break;
                case 'android':
                    print('<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes/android/android.css" rel="stylesheet" />');
                    break;
            }
        } else {
            print('<script>');
            print('if(navigator.platform.toLowerCase().match(/(android|linux)/)){');
            print(' mobileTheme = \'<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes/android/android.css" rel="stylesheet" />\';');
            print('}else{');
            print(' mobileTheme = \'<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes/iphone/iphone.css" rel="stylesheet" />\';');
            print('}');
            print('document.write(mobileTheme);');
        }
        ?>
        </script>
        <script type="text/javascript" src="http://betadesktop.tapnmap.ru/js/TMap/TMap.js"></script>
        <script type='text/javascript' src='http://betadesktop.tapnmap.ru/js/jquery/js/jquery-1.7.1.min.js'         ></script>
        <script type='text/javascript' src='http://betadesktop.tapnmap.ru/js/jquery/js/jquery.mousewheel.min.js'    ></script>
        <script type="text/javascript" src="http://betadesktop.tapnmap.ru/js/API/TPlanEngine.js"></script>
        <script type="text/javascript" src="http://betadesktop.tapnmap.ru/js/API/TToolTip.js"></script>
        <style>
        /* iOS styles */

        /* vertically center the image */
        .tweetviewRefresh {
            float:right;
        }       
        .tweetviewRefresh img   {
            margin-top:6px;
        }
        /* tweetview pane */
        .mblScrollableViewContainer {
            padding-bottom:40px !important;
        }
        .tweetviewList {
            
        }       
        .tweetviewHidden {
            display:none;
        }
        .tweetviewList li {
            min-height:55px;
            padding-top:8px;
        }
        .tweetviewListItem { /* special formatting to allow 2 lines of content */
            line-height:18px;
            height:auto;
        }
        /* user's avatar */
        .tweetviewAvatar {
            float:left;
            padding-right:5pt;
        }       /* content wrapper for tweets */
        .tweetviewContent {
            padding-left:60px;
        }
        /* username formatting */
        .tweetviewUser {
            font-size:80%;
        }
        /* actual tweet text formatting */
        .tweetviewText {
            font-size:70%;
            font-weight:normal;
            padding-right:50px;
            padding-bottom:10px;
        }
        .android .tweetviewText {
            font-size:50%;
        }

        /* tweet time */
        .tweetviewTime {
            float:right;
            color:#777;
            font-size:65%;
            font-weight:normal;
            padding-right:10px;
        }
        /* clears floats at the end of the list item */
        .tweetviewClear {
            clear:both;
        }
        .tweetviewSwitch {
            right:10px;
            top:10px;
            float:right;
        }
        .tweetviewHidden {
            display:none;
        }
        .tweetviewTabBar {
            margin-top:-49px;
        }

        /* Android styles */

        .android .tweetviewRefresh img {
            margin-top: 3px;
        }
        .android .mblRoundRectList {
            background-color: #000;
            border: none;
        }
        .android .tweetviewTime {
            color: #FFF;
        }
        .android .mblTabBarButtonTextBox {
            color: #FFF;
        }
        .android .mblTabBar .mblTabButtonSelected {
            background-color: transparent;
            border-radius: 0;
        }
        .android .mblColorDefaultSet {
            background: #FFC700;
        } 
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
    </head>
    <body>
        <div id="mallList" dojoType="dojox.mobile.ScrollableView" selected="true" style="position: absolute !important;">
            <h1 dojoType="dojox.mobile.Heading" fixed="top">Торговые центры</h1>    
            <ul dojoType="dojox.mobile.RoundRectList">
                <?
                $dbDataTable = Array();
                if($query_result){
                    while(list($placeId, $placeName, $placePhotoPath) = mysql_fetch_row($query_result)){
                        $dbDataTable[] = Array('place_id'         => $placeId,
                                               'place_name'       => $placeName,
                                               'place_photo_path' => $placePhotoPath
                                               );
                    }
                }
                foreach($dbDataTable as $row){
                    $placeId = $row['place_id'];
                    $placeName = $row['place_name'];
                    $placePhotoPath = $row['place_photo_path'];
                    echo "<li dojoType='dojox.mobile.ListItem' class='mblListItem tweetviewListItem' style='padding: 5px !important' moveto='mallDetails' onclick='showDetailsView($placeId)'>";
                    echo "<img class='tweetviewAvatar' src='$placePhotoPath' style='width: 48pt; height: 48p'>";
                    echo '<div class="tweetviewContent">';
                    echo "<div class='tweetviewUser'><br>$placeName</div>";
                    echo '<div class="tweetviewText"></div>';
                    echo '<div class="tweetviewClear"></div>';
                    echo '</div>';
                    echo '</li>';
                }
                ?>
            </ul>
        </div>

        <div id="mallDetails" dojoType="dojox.mobile.View">
            <div id='MallDescription' dojoType="dojox.mobile.ScrollableView" selected="true" >
                <h1 id='MallDescriptionHeader'  dojoType="dojox.mobile.Heading" back="Список ТЦ" moveTo="mallList" fixed="top">
                    <div id='mallName'/>
                </h1>
                <div dojoType="dojox.mobile.RoundRectList">
                    <div id='mallInfo' class="mblVariableHeight" dojoType="dojox.mobile.ListItem">
                    </div>
                </div>
            </div>
            <div id='2' dojoType="dojox.mobile.View" selected="false">
                <h1 id='CityMapHeader' dojoType="dojox.mobile.Heading" back="Список ТЦ" moveTo="mallList" fixed="top">
                    Cхема проезда
                </h1>
                <div id='google_map' style='width: 100% !important; height: 100% !important; position: relative !important; display: block !important;'>
                </div>
            </div>
            <div id='3' dojoType="dojox.mobile.View" selected="false">
                <h1 id='MallPlanHeader' dojoType="dojox.mobile.Heading" back="Список ТЦ" moveTo="mallList" fixed="top">
                    План здания
                </h1>
                <div id='buildingplan_area' style='width: 100% !important; height: 100% !important; position: relative !important; display: block !important;'>
                </div>
            </div>

            <ul dojoType="dojox.mobile.TabBar" id='tabs' fixed="bottom">
                <li id="mallDescriptionTabButton" dojoType="dojox.mobile.TabBarButton"  moveTo="MallDescription" selected="true" onclick='onTab1Click();'>О торговом центре</li>
                <li id="cityMapTabButton"         dojoType="dojox.mobile.TabBarButton"  moveTo="2" selected="false" onclick='onTab2Click();'>Как проехать</li>
                <li id="mallPlanTabButton"        dojoType="dojox.mobile.TabBarButton"  moveTo="3" selected="false" onclick='onTab3Click();'>Что внутри</li>
            </ul>

        </div>
    </body>
        <script type="text/javascript">
            dojo.require("dojox.mobile.parser");
            dojo.require("dojox.mobile");
            dojo.require("dojox.mobile.ScrollableView");
            dojo.require("dojox.mobile.TabBar");
            dojo.requireIf(!dojo.isWebKit,"dojox.mobile.compat");
            var actualTab = 'MallDescription';
            var placeInfoObject = null;
            var currentPlaceId = null;
            <?
            $query_result = mysql_query("SELECT city_latitude, city_longitude, city_zoom FROM cities WHERE city_id=$city_id;");
            if($query_result){
                list($city_latitude, $city_longitude, $city_zoom) = mysql_fetch_row($query_result);
                echo "var cityInfoObject={\"city_latitude\": \"$city_latitude\",
                                          \"city_longitude\": \"$city_longitude\",
                                          \"city_zoom\": \"$city_zoom\"
                                        };
                                        ";
            }
            ?>
            dojo.ready(function() {
                // Parse the page!
                dojox.mobile.parser.parse();
                document.getElementById('google_map').setAttribute('style', 'height: '+ (window.innerHeight - document.getElementById('CityMapHeader').offsetHeight - document.getElementById('tabs').offsetHeight) +'px !important;');
                document.getElementById('buildingplan_area').setAttribute('style', 'height: '+ (window.innerHeight - document.getElementById('CityMapHeader').offsetHeight - document.getElementById('tabs').offsetHeight) +'px !important;');
                // var headerIds = ['MallDescriptionHeader', 'CityMapHeader', 'MallPlanHeader'];
                // for(var i in headerIds){
                //     var header = $('#'+headerIds[i]);
                //     // header.children('.mblArrowButtonBody')[0].click(function(clickEvent){
                //     //     // $('#tabs').css({visisbility: 'hidden !important'});
                //     //     alert('clicked!');
                //     // });
                // }
                var tpe = null;
            });
            function loadMap(){
                var map = MapEngines.Google();
                map.initMap(
                    'google_map', 
                    MapTypes.ROADMAP, 
                    new Coords(cityInfoObject['city_latitude'], cityInfoObject['city_longitude']), 
                    parseInt(cityInfoObject['city_zoom'])
                );
                map.addPlaceMark(new PlaceMark(new Coords(placeInfoObject['place_latitude'], placeInfoObject['place_longitude']), placeInfoObject['place_name'], null));
            };
            function loadPlan(){
                $('#buildingplan_area').html('<div id="building_plan"/>');
                var plan = $('#building_plan');
                plan.css({'width': '100%', 'height': '100%', 'position': 'absolute'});
                tpe = new TPlanEngine({parentElementId:        'building_plan',
                                       predefinedParentHeight: $('#buildingplan_area').height()});
                $.get("http://alfamobile.tapnmap.ru/php/getplan.php?plan_id=" + currentPlaceId, 
                    function(data){
                        tpe.setUpPlanFromText(data);
                    }
                );
            };
            function switchActualTab(id){
                actualTab = id;
            }
            function onTab1Click(){
                switchActualTab('MallDescription');
                $($('#MallDescriptionHeader').find('.mblArrowButtonBody')[0]).click(function(clickEvent){
                    $('#tabs').css({visibility: 'hidden'});
                });
            }
            function onTab2Click(){
                switchActualTab('2');
                loadMap();
                $($('#CityMapHeader').find('.mblArrowButtonBody')[0]).click(function(clickEvent){
                    $('#tabs').css({visibility: 'hidden'});
                });
            }
            function onTab3Click(){
                switchActualTab('3');
                loadPlan();
                $($('#MallPlanHeader').find('.mblArrowButtonBody')[0]).click(function(clickEvent){
                    $('#tabs').css({visibility: 'hidden'});
                });
            }
            function switchToTabById(tabButtonId){
                var tabButton = document.getElementById(tabButtonId);
                var clickEvent = document.createEvent("MouseEvents");
                clickEvent.initEvent("click","true","true");
                tabButton.dispatchEvent(clickEvent);
                tabIds = ["mallDescriptionTabButton", "cityMapTabButton", "mallPlanTabButton"];
                for(i=0; i<tabIds.length; i++){
                	$('#'+tabIds[i]).removeClass('mblTabButtonSelected');
                }
                $('#'+tabButtonId).addClass('mblTabButtonSelected');
            }
            function loadMallDescription(){
                $.get("http://alfamobile.tapnmap.ru/php/get_malldescription.php?place_id="+currentPlaceId,
                    function(data){
                        placeInfoObject = JSON.parse(data);
                        $('#mallName').text(placeInfoObject['place_name']);
                        $('#mallInfo').html('<img src="' + placeInfoObject['place_photo_path'] + '" style="width: 100%;"/>' +
                                            placeInfoObject['place_detailed_description']);
                        
                    }

                );
            }
            function showDetailsView(place_id){
                if(currentPlaceId != place_id){
                    switchToTabById('mallDescriptionTabButton');
                }
                currentPlaceId = place_id;
                $('#'+actualTab).css({display: 'block'});
                $('#tabs').css({visibility: 'visible'});
                loadMallDescription();
            }
        </script>
</html>
